<template>
    <view>
        <view class="form-card">
            <view class="form-item">
                <view class="item-label u-flex u-col-center">
                    <text class="label-text u-font-28 u-color-title">{{title}}</text>
                </view>
                <view class="radio-group u-flex u-row-left u-col-center u-margin-top-20">
                    <view class="radio-item u-flex u-col-center" @click="onClick(1)">
                        <view class="radio-icon-wrapper">
                            <i class="icon radio-icon u-font-32" :class="choice==1? 'radio-active' : 'radio-inactive'">
                                {{choice==1 ? '&#xe661;' : '&#xe8bb;'}}
                            </i>
                        </view>
                        <text class="radio-label u-font-28 u-color-content">是</text>
                    </view>
                    <view class="radio-item u-flex u-col-center u-margin-left-40" @click="onClick(0)">
                        <view class="radio-icon-wrapper">
                            <i class="icon radio-icon u-font-32" :class="!choice ? 'radio-active' : 'radio-inactive'">
                                {{!choice ? '&#xe661;' : '&#xe8bb;'}}
                            </i>
                        </view>
                        <text class="radio-label u-font-28 u-color-content">否</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    /**
     * 单选按钮
     * @description 此组件一般用于单选。
     * @tutorial https://www.dfer.site
     * @property {String} title 标题
     * @event {Function} @clickHandler 选择单选按钮会触发此事件
     * @example <dfer-radio @clickHandler="handleRadioClick" title="问题是否得到解决" />
     */
    export default {
        name: "dfer-radio",
        data() {
            return {
                choice: 1
            };
        },
        props: {
            title: {
                type: String,
                default () {
                    return "单选按钮"
                }
            },
            option: {
                type: String,
                default () {
                    return "单选按钮"
                }
            }
        },
        watch: {},
        created() {},
        methods: {
            onClick(value) {
                this.choice = value;
                this.$emit('clickHandler', value);
            }
        }
    }
</script>

<style lang="scss">
    /* 表单 */
    .form-card {
        background: #ffffff;
        margin: 20rpx;
        border-radius: 16rpx;
        box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
        padding: 30rpx;

        .form-item {
            margin-bottom: 10rpx;

            .item-label {
                margin-bottom: 20rpx;
            }

            .label-text {
                font-weight: 500;
                color: #1a1a1a;
            }

            /* 单选框 */
            .radio-group {
                .radio-item {
                    padding: 16rpx 0;
                }

                .radio-icon-wrapper {
                    margin-right: 16rpx;
                }

                .radio-active {
                    color: #1890ff;
                }

                .radio-inactive {
                    color: #d9d9d9;
                }

                .radio-label {
                    color: #333;
                }
            }
        }
    }
</style>